<template>
  <el-container>
    <!-- 头部区域 -->
  <el-header>
      <el-row>
        <el-col :span="19">
            <div class="grid-content bg-purple">
               <el-row :gutter="20">
                   <el-col :span="4">
                       <h4 class="title"> 特征串并</h4>
                   </el-col>
                   <!-- <el-col :span="2">
                       <el-button type="info" plain >总揽</el-button>
                   </el-col>
                   <el-col :span="3">
                       <el-button type="info" plain class="button2">专项串并</el-button>
                   </el-col>
                   <el-col :span="3">
                       <el-button type="info" plain>引导串并</el-button>
                   </el-col> -->
               </el-row>
            </div>
        </el-col>
        <el-col :span="5">
            <div class="grid-content bg-purple">
                <el-input placeholder="请输入内容" v-model="cbabh" clearable >
                    <el-button slot="append" icon="el-icon-search" @click="getcbabhdetail"></el-button>
                </el-input>
            </div>
        </el-col>
    </el-row>
  </el-header>
  <!-- 主体区域 -->
  <el-main>
      <el-card>
        <h3>电信诈骗</h3>
        <!-- 动态生成串并表格 -->
        <el-table :data="tableData">
        <el-table-column align="center" label="串并案编号" show-overflow-tooltip>
            <template  slot-scope="scope">
               <span class="viewdetails"  @click="tostringcasedetail(scope.row.cbabh)">{{scope.row.cbabh}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="cbamc" label="串并案名称" show-overflow-tooltip ></el-table-column>
        <el-table-column align="center" prop="cbyj" label="串并依据" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="案件数(已破/总数)"  show-overflow-tooltip>
            <template slot-scope="scope">
                <span>{{scope.row.ypa}}/{{scope.row.ajs}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="djsj" label="串并时间" show-overflow-tooltip >
            <template slot-scope="scope">
                <span>{{scope.row.djsj | dateFormat}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center"  label="串并详情" width="100" show-overflow-tooltip>
            <template  slot-scope="scope">
                <!-- <el-button type="primary" size="mini" icon="el-icon-tickets" @click="tostringcasedetail"></el-button> -->
                <el-button type="primary" @click="tostringcasedetail(scope.row.cbabh)" class="viewdetails">查看详情</el-button>
            </template>
        </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
      </el-card>
  </el-main>
</el-container>
</template>

<script>
export default {

  data () {
    return {
        // 表格数据
        tableData:[],
        queryData:{
            query:'',
            pageNum:1,
            pageSize:10
        },
        total:0,
        cbabh:'',
    }
  },

  methods: {
    tostringcasedetail(id){
        this.$router.push({
            path:'/stringcasedetail',
            query:{
                id :id
            }
     })
    },
    // 获取串并案列表数据个数
    async getstringcasedetail(){
        const res = await this.axios.get('/ynzc/ajcp/getAjcpList',{
            params:this.queryData
        })
        console.log(res);
        if(res.data.status==200){
            this.tableData =res.data.results.data
            this.total = res.data.results.total
            console.log(this.tableData);
            
        }
    },
     // input搜索串并案列表数据
      async getcbabhdetail(cbabh){
        const res = await this.axios.get('/ynzc/ajcp/getAjcpList?cbabh='+this.cbabh)
        console.log(res);
        if(res.data.status==200){
            this.tableData =res.data.results.data
            this.total = res.data.results.total
            console.log(this.tableData);  
        }
    },
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.queryData.pageSize = val
        this.getstringcasedetail()
    },
    handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.queryData.pageNum = val
        this.getstringcasedetail()
    }
},

  created () {
    this.getstringcasedetail()
  }
}
</script>

<style lang='less' scoped>
    .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    }
    .el-col {
        border-radius: 4px;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .el-header {
    margin-bottom: 10px;
    }
    .title{
        margin-left: 10px;
        font-size: 18px;
        font-weight: 700;
        margin-top: 8px;
    }
    .button2{
        margin-left: 12px;
    }
    .viewdetails {
        color: blue;
    }
</style>
